<template>
  <div class="nav3">
    <NavTitle title="巡检数据统计" />
    <div class="flex items-center justify-between">
      <div class="item_bg">
        <div class="ys1">{{ infoData.userCount }}</div>
        <div>巡检人员</div>
      </div>
      <div class="item_bg">
        <div class="ys2">{{ infoData.pointCount }}</div>
        <div>巡检点</div>
      </div>
    </div>
    <div class="list">
      <div class="flex list_header">
        <div class="w-200px text-center text-#4C99FF font-600">打卡时间</div>
        <div class="flex-1 text-#4C99FF text-center font-600 truncate">
          场地名称
        </div>
        <div class="flex-1 text-#4C99FF text-center font-600 truncate">
          巡检人员
        </div>
      </div>
      <el-scrollbar height="176px">
        <div
          v-for="item in listData"
          :key="item.nickName"
          class="flex list_main"
        >
          <div class="w-200px text-center">{{ item.createTime }}</div>
          <div
            class="flex-1 text-center color-#2ACFFF truncate"
            :title="item.pointName"
          >
            {{ item.pointName }}
          </div>
          <div class="flex-1 text-center truncate" :title="item.nickName">
            {{ item.nickName }}
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import NavTitle from "@/components/NavTitle";
import { useImageUrl } from "@/utils";
import { jinyangTaskCountApi } from "@/api";

const infoData = ref({});
const listData = ref([]);
const getData = async () => {
  const { data } = await jinyangTaskCountApi();
  infoData.value = data;
  listData.value = data.items;
};

getData();
</script>

<style lang="scss" scoped>
.nav3 {
  color: #fff;
  .item_bg {
    width: 220px;
    height: 80px;
    background-size: 100% 100%;
    padding-left: 85px;
    padding-top: 15px;
    &:nth-child(1) {
      background: url(@/assets/m1.png);
    }
    &:nth-child(2) {
      background: url(@/assets/m2.png);
    }
    .ys1 {
      font-size: 20px;
      background: linear-gradient(
        180deg,
        #ffffff 0%,
        #9bcfff 65.66%,
        #3389ff 100%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .ys2 {
      font-size: 20px;
      background: linear-gradient(
        180deg,
        #ffffff 0%,
        #8de9d6 66.87%,
        #0ec983 100%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .list {
    .list_header {
      height: 40px;
      background: url(@/assets/cb.png);
      background-size: 100% 100%;
      display: flex;
      align-items: center;
    }
    .list_main {
      height: 44px;
      background: url(@/assets/ca.png);
      background-size: 100% 100%;
      display: flex;
      align-items: center;
    }
  }
}
</style>
